<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				课表
			</text>
		</base-nav-bar>
		<!-- 商家简介 -->
		<view class="goods-add u-flex u-flex-column u-flex-items-center u-p-t-20 u-p-b-20 u-m-l-30 u-m-r-30" :style="{'top':customBar+ 'px' }">
			<view class="u-flex goods-add-btn u-flex-between u-flex-items-center">
				<view class="date_choose">日期选择</view>
				<view class="goods-add-txt u-m-l-20 u-flex u-flex-start u-flex-items-center" @click="changeDate()">
					<view>{{ classDateFormat }}</view>
					<u-icon name="arrow-right" size="14" :color="'#fff'"></u-icon>
				</view>
			</view>
		</view>
		<view class="content-box"  v-if="!isEmpty" style="margin-top: 120rpx;">
			<view class="u-flex u-flex-column u-flex-center u-flex-items-center merchant-box u-p-t-20 u-p-b-20 u-m-l-30 u-m-r-30 u-m-b-20" v-for="(item,index) in goodsList" :key="index">
				<view class="class-item u-flex u-flex-between u-flex-items-center">
					<view class="u-flex u-flex-start u-flex-column u-flex-items-start u-flex-1">
						<view class="class-name u-m-l-20">{{item.course_name}}</view>
					</view>
					<view class="u-flex u-flex-column u-flex-items-center u-flex-center u-flex-1">
						<view class="class-time">{{item.c_time}}</view>
					</view>
					<view class="u-flex u-flex-end u-flex-items-center u-m-r-20 u-flex-1">
						<view class="class-teacher-name">{{ item.teacher_name }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据为空 -->
		<u-empty
			v-if="isEmpty"
			mode="data"
			:marginTop="220"
			text="暂无课程记录"
		>
		</u-empty>
		<u-datetime-picker
			ref="datetimePicker"
			:show="showDate"
			v-model="classDate"
			mode="date"
			:confirmColor="'#37AD53'"
			@cancel="showDate=false"
			@confirm="changeDateData()"
		></u-datetime-picker>
		<!-- 更多 -->
		<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"/>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";
export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			showDate: false,
			classDate: Number(new Date()),
			classDateFormat:this.formatTimestamp(Number(new Date())),
			goodsList:[
				{
					logo: "/static/images/merchant/course/goods_bg.png",
					name: "南彩路淘玩生活馆",
					phone: "0703-0078653",
					address: "深圳市福田区文化东路与科技大道",
					introduction: "课程:羽毛球小班课培训(4-6人)、羽毛球一对二进阶课私教培训、羽毛球一对一培训…",
					time: "08:00～20:00"
				},
				{
					logo: "/static/images/merchant/course/goods_bg.png",
					name: "南彩路淘玩生活馆",
					phone: "0703-0078653",
					address: "深圳市福田区文化东路与科技大道",
					introduction: "课程:羽毛球小班课培训(4-6人)、羽毛球一对二进阶课私教培训、羽毛球一对一培训…",
					time: "08:00～20:00"
				}
			],
			loadStatus   : 'nomore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage  : 1,
			lastPage     : 1,
			total  : '',
			isEmpty      : false,
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			console.log("====statusBarHeight",statusBarHeight)
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		if(!this.isLogin){
		
		}
		
	},
	onHide() {
	},
	onLoad() {
		this.goodsList = [];
		this.currentPage = 1;
		this.getMourserList()
	},
	created() {
		// 触底监听
		uni.$on('uOnReachBottom', data => {
			if (this.loadStatus == 'loadmore') {
				this.currentPage += 1;
				this.getMourserList();
			}
		});
	},
	onReady() {
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		formatTimestamp(timestamp) {
			const date = new Date(timestamp);
			const year = String(date.getFullYear());
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且保证两位数
			const day = String(date.getDate()).padStart(2, '0'); // 保证两位数
			
			return `${year}-${month}-${day}`;
		},
		changeDate(){
			this.showDate = true;
		},
		changeDateData(e){
			console.log("===e",e.value)
			this.showDate = false;
			this.classDate = e.value;
			this.classDateFormat = this.formatTimestamp(this.classDate);
			this.goodsList = [];
			this.currentPage = 1;
			this.getMourserList()
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		// 消费列表
		getMourserList() {
			let that = this;
			that.$Api.merchant.timetable(  {
				page    : that.currentPage,
				pageSize: 20,
				day:that.classDateFormat
			}).then(res => {
				that.goodsList = [...that.goodsList, ...res.data.data];
				that.isEmpty     = !that.goodsList.length;
				that.loadStatus  = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}
.goods-add{
	position: fixed;
	background: #F6F6F8;
	z-index: 1000;
	width: calc(100% - 60rpx);
	.goods-add-btn{
		background: linear-gradient( 270deg, #20CE83 0%, #9FF79A 100%);
		border-radius: 8px;
		width: 100%;
		height: 80rpx;
		.date_choose{
			padding: 0 20rpx;
			font-size:32rpx;
			color:#fff;
		}
		.goods-add-txt{
			padding: 0 20rpx;
			color: #fff;
			font-size: 26rpx;
		}
	}
}

.content-box{
	.merchant-box{
		height: 90rpx;
		background: #E5F9E8;
		border-radius: 6px;
		border: 1px solid #37AD53;
		position: relative;
		.class-item{
			width: 100%;
			font-weight: 400;
			font-size:28rpx;
			color: #37AD53;
			line-height: 20px;
			text-align: right;
			font-style: normal;
			.class-name{
			
			}
			.class-time{
			
			}
			.class-teacher-name{
			
			}
		}
		
	}
}
</style>
